<!DOCTYPE html>
<html xmlns:th="http://wwww.thymeleaf.prg">
<html lang="en">
<head>
    <link rel="shortcut icon" href="/images/love.ico" />
    <meta charset="UTF-8">

    <title>举报</title>
    <link rel="stylesheet" type="text/css" href="/css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="/css/demo.css">
    <link href="/dist/styles.imageuploader.css" rel="stylesheet" type="text/css">

    <script src="/js/jquery-2.2.3.min.js" type="text/javascript"></script>
    <script src="/dist/jquery.imageuploader2.js" type="text/javascript"></script>

</head>
<body>
<section role="main" class="l-main" style="margin-top:50px;margin-bottom:50px;">
    <div class="uploader__box  l-center-box">
        <h2>
            举报：
        </h2>

        <input id="sharerId" th:value="${session.sharer.id}" type="hidden">
        <input id="projectId" th:value="${projectId}" type="hidden">
        <textarea style="width:400px;height:100px;overflow-x: hidden;overflow-y: hidden;vertical-align:top"
                  id="text">请实事求是！</textarea>
    </div>
    <br>
    <br>
    <span style="font-size: 15px;color: #ee4611">注意：上传一张或一张以上之后，下方才会弹出提交按钮</span><br>
    <div class="uploader__box js-uploader__box l-center-box">
        <form action="#" method="POST" id="upData">
            <div class="uploader__contents">
                <label class="button button--secondary" for="fileinput">请选择文件</label>
                <input id="fileinput" class="uploader__file-input" type="file" multiple value="Select Files">
            </div>
            <input class="button button--big-bottom" type="submit" value="Upload Selected Files">
        </form>
    </div>
</section>
<script>

    $(function () {


        $('.js-uploader__box').uploader({
            'selectButtonCopy': '请选择或拖拽文件',
            'instructionsCopy': '你可以选择或拖拽多个文件',
            'submitButtonCopy': '提交所有信息（包含文件和上方所有信息，请再三检查后提交）',
            'furtherInstructionsCopy': '你可以选择或拖拽更多的文件',
            'secondarySelectButtonCopy': '选择更多的文件',
        });
    })

    // $(".prove").change(function () {
    //     var path=$(this).val();
    //     if (checking(path)) {
    //         var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
    //         var a = $(".prove").index(this);
    //         $(".img")[a].src=objUrl;//将图片路径存入src中，显示出图片
    //     }else {
    //         alert("上传类型必须为图片！");
    //     }
    // });
    //
    // $(".submit").on("click",function () {
    //     var formdata = new FormData();
    //     var sharerId=$("#sharerId").val();
    //     var projectId=$("#projectId").val();
    //     var text = $("#text").val();
    //
    //     formdata.append("sharerId",sharerId);
    //     formdata.append("projectId",projectId);
    //     formdata.append("text",text);
    //     formdata.append("img1",)
    //
    // })
    // function getObjectURL(file) {
    //     var url = null;
    //     if (window.createObjectURL != undefined) { // basic
    //         url = window.createObjectURL(file);
    //     } else if (window.URL != undefined) { // mozilla(firefox)
    //         url = window.URL.createObjectURL(file);
    //     } else if (window.webkitURL != undefined) { // webkit or chrome
    //         url = window.webkitURL.createObjectURL(file);
    //     }
    //     return url;
    // }
    // function  checking(path) {
    //     if (path.length == 0) {
    //         alert("上传为空");
    //         return false;
    //     } else {
    //         var extStart = path.lastIndexOf('.'),
    //             ext = path.substring(extStart, path.length).toUpperCase();
    //         if (ext !== '.PNG' && ext !== '.JPG' && ext !== '.JPEG' && ext !== '.GIF') {
    //             return false;
    //         }else {
    //             return true;
    //         }
    //     }
    // }


</script>
</body>
</html>